<template>
	<view class="base-info">
		<view class="uv-flex-row" style="justify-content: space-between;padding: 0 0 30px;border-bottom: 1px solid #bbb;">
			<text style="color: #fff;font-size: 34px;font-weight: 700;">新建课程包</text>
		</view>
		<uv-gap height="30px"></uv-gap>
		<uv-form labelPosition="top" :label-style="{color: '#fff'}" :model="formData" :rules="rules" ref="form" label-width="100px">
			<uv-form-item label="课程包名称" prop="name" borderBottom required>
				<uv-input v-model="formData.name" border="none" color="#fff" placeholder="请输入课程包名称" :maxlength="10"></uv-input>
			</uv-form-item>
			<uv-form-item label="课程包简介" prop="chapterDesc" borderBottom>
				<uv-input v-model="formData.chapterDesc" border="none" color="#fff" placeholder="请输入课程包简介" :maxlength="30"></uv-input>
			</uv-form-item>
			<uv-form-item label="图片logo" name="logo" borderBottom>
				<uv-radio-group v-model="selectLogo" placement="row" style="align-items: center;">
					<uv-radio :name="item.path" v-for="(item,index) in baseInfo.defaultLogo" :key="index" style="margin: 20px 10px;cursor: pointer;">
						<image :src="item.path" mode="aspectFill" style="width: 70px;height: 50px;border-radius: 5px;"></image>
					</uv-radio>
					<view style="width: 70px;height: 50px;" class="uv-flex-row">
						<uni-file-picker :image-styles="{width: 70, height: 50}" file-mediatype="image" return-type="object" v-model="customLogo">
							<button style="font-size: 12px;padding: 0 5px;">选择文件</button>
						</uni-file-picker>
					</view>
				</uv-radio-group>
			</uv-form-item>
			<uv-button text="取消" @click="back"></uv-button>
			<uv-button v-if="type == 'create'" type="primary" text="立即创建" :loading="btnLoading" customStyle="margin-top: 10px" @click="sub"></uv-button>
			<uv-button v-if="type == 'edit'" type="primary" text="保存" :loading="btnLoading" customStyle="margin-top: 10px" @click="subEdit"></uv-button>
		</uv-form>
	</view>
</template>
<script setup>
	import { reactive, ref, watch, computed } from 'vue';
	import { customChapterCreate, customChapterEdit } from '@/common/api/course.js'
	const emits = defineEmits(['cancel', 'change']);
	const btnLoading = ref(false);
	const form = ref(null);
	const db = uniCloud.database();
	const selectLogo = ref('');
	const customLogo = ref([]);
	const baseInfo = reactive({
		defaultLogo: []
	})
	const formData = reactive({
		name: '',
		chapterDesc: '',
		logo: ''
	})
	const rules = {
		name: {
			type: 'string',
			required: true,
			message: '请输入课程包名称',
			trigger: ['blur', 'change']
		}
	}
	const props = defineProps({
		type: {
			type: String,
			default: ''
		},
		detail: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	watch(() => selectLogo.value, (newVal) => {
		if (newVal) formData.logo = newVal;
	}, { immediate: true })
	watch(() => props.detail, (newVal) => {
		if (newVal) {
			formData.name = newVal.name;
			formData.chapterDesc = newVal.chapterDesc;
			formData.logo = newVal.logo;
		}
	}, { immediate: true })
	const myCharacterId = computed(() => {
		return getApp().globalData.dzcharacter?.character?.characterId;
	})

	function sub() {
		btnLoading.value = true;
		form.value.validate().then(async res => {
			await customChapterCreate({
				characterId: myCharacterId.value,
				uid: uniCloud.getCurrentUserInfo().uid,
				...formData
			})
			emits('change');
		}).catch(err => {

		}).finally(res => {
			btnLoading.value = false;
		})
	}
	
	function subEdit() {
		btnLoading.value = true;
		form.value.validate().then(async res => {
			await customChapterEdit({
				characterId: myCharacterId.value,
				uid: uniCloud.getCurrentUserInfo().uid,
				...formData
			})
			emits('change');
		}).catch(err => {
		
		}).finally(res => {
			btnLoading.value = false;
		})
	}

	async function getDefultLogo() {
		const { result } = await db.collection('a-dz-images').where('type == "background"').get();
		baseInfo.defaultLogo = result.data;
		selectLogo.value = result.data[0].path;
	}

	function back() {
		emits('cancel');
	}
	getDefultLogo();
</script>
<style>
	>>>.uni-file-picker__container {
		margin: 0;
	}
	>>>.file-picker__box-content {
		margin: 0;
	}
</style>
<style scoped lang="scss">
	.base-info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: #000;
		padding: 40px;
	}
</style>